<template>
  <div class="cardsLine">
    <el-row :gutter="20">
      <el-col :span="span" :offset="0"  v-for="(item, index) in data" :key="index" @click="cardHandle(item)">
        <el-card class="cardItem" shadow="always">
          <div class="itemBox">
            <el-icon :size="30" class="icon" :class="item.color">
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.title}}</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  span: {
    type: Number,
    default: 6,
  },
});

function cardHandle(item) {
  console.log(item);
  emit('cardClick', item)
}

const emit=defineEmits(['cardClick'])
</script>

<style lang="scss" scoped>
.cardsLine {
  .cardItem {
    // height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    &:hover {
      @apply bg-gray-100;
    }
    .itemBox {
      @apply flex flex-col items-center justify-content cursor-pointer;
      .icon{
        // @apply text-blue-500;
      }
      span{
        @apply text- mt-2;
      }
    }
  }
}
</style>